<template>
  <!-- 长篇(连载) -->
  <div class="long">
    <div
      class="long-box"
      v-for="item in data"
      :key="item.id"
      @click="$router.push(`/longPage/${item.serial_id}`)"
    >
      <div class="top">
        <img :src="item.cover" alt="" />
        <span>#已完结</span>
        <span>《{{ item.serial_title }}》</span>
      </div>
      <div class="bottom">
        <div>{{ getLength(item.forward) }}</div>
        <div>{{ item.subtitle }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLong } from "@/api/find.js";
export default {
  name: "long",
  data() {
    return {
      data: [],
    };
  },
  created() {
    this.getLongData();
  },
  methods: {
    async getLongData() {
      const { data } = await getLong();
      this.data = data;
      console.log("长篇数据", this.data);
    },
    // 处理字数长度的方法
    getLength(str) {
      if (str.length > 20) {
        return str.substr(0, 19) + "...";
      } else {
        return str;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.long {
  padding: 0px 15px 60px 15px;
  box-sizing: border-box;
  .long-box {
    border-radius: 10px;
    margin: 15px 0;
    outline: solid;
    outline-width: 1px;
    outline-color: #e6e6e6;
    .top {
      position: relative;
      img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      & > :nth-child(2) {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #fff;
        font-size: 14px;
      }
      & > :nth-child(3) {
        position: absolute;
        bottom: 20px;
        left: 10px;
        font-size: 20px;
        color: #fff;
      }
    }
    .bottom {
      padding: 10px;
      & > :nth-child(1) {
        color: #898989;
        font-size: 16px;
        margin-bottom: 5px;
      }
      & > :nth-child(2) {
        color: #dedede;
        font-size: 14px;
      }
    }
  }
}
</style>